import React, {
    ReactElement,
    PureComponent
} from 'react';

import {
    ViewStyle,
    Keyboard
} from 'react-native';

import Modal,{
    Direction
} from './../Modal';

interface State {
    show:boolean
}

interface Props {
    fixed:boolean,
    style?:ViewStyle,
    maskOpacity?:number,
    onClosed:Function,
    direction:Direction,
    children:ReactElement,
    clickClose:boolean,
    backClose:boolean,
    enableBack:boolean
}

class Content extends PureComponent<Props,State> {
    state = {
        show:true
    }

    static defaultProps = {
        fixed:true,
        clickClose:false,
        backClose:true,
        enableBack:true,
        direction:'center',
        onClosed:() => null
    }

    onClose = () => {
        this.setState({
            show:false
        })
    }

    get children() {
        const {
            children
        } = this.props;
        return React.cloneElement(children,{
            onDialogClose:this.onClose
        })
    }

    componentDidMount() {
        Keyboard.dismiss();
    }

    render() {
        const {
            show
        } = this.state;

        const {
            style,
            fixed,
            backClose,
            onClosed,
            direction,
            maskOpacity,
            clickClose,
            enableBack
        } = this.props;

        return (
            <Modal
                show={show}
                fixed={fixed}
                portal={false}
                style={style}
                enableBack={enableBack}
                backClose={backClose}
                onClosed={onClosed}
                direction={direction}
                maskOpacity={maskOpacity}
                children={this.children}
                onClose={clickClose?this.onClose:undefined}
            />
        )
    }
}

export default Content;